<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
	const root = ReactDOM.createRoot(document.querySelector("#app"));
	// 1- 浏览器渲染的过程是什么？
	//     答：当浏览器获取到响应信息后，浏览器会通过对HTML解析生成DOM树，通过对CSS解析生成CSS规则树。
	//        往往在JS执行的过程中要对DOM或CSS进行修改，一旦修改就有可能造成重排重绘。
	// 2- 什么是重排重绘？
	//     答：当元素中的几何属性（位置 ，大小）发生更改后，会造成自身及其它元素的几何属性发生更改。
	//        自身的发生改变的属性会失效，要对其进行重新的构建，构建的过程即是重排。
	//        重排之后要对其元素进行渲染，渲染的过程即是重绘。
	// 3- 真实DOM:会产生重排重绘。如果页面比较复杂，那么会造成大旦的重排重绘。
	// 4- 虚拟DOM:React 操作的并不是真实的DOM，而是虚拟DOM.
	//      4-1 虚拟DOM是一个JS对象
	//      4-2 虚拟DOM对象中的属性会与真实DOM的属性进行对应
	//      4-3 虚拟DOM最终会被转换为真实DOM,虚拟DOM是轻量级，而真实DOM是重量级。
	root.render("over");// {}
	
</script>
</html>